<template>
  <div class="layout-padding">
    <!-- 搜索输入框 -->
    <el-form inline :model="query">
      <el-form-item label="角色名称">
        <el-input
          v-model="query.keyword"
          maxlength="30"
          placeholder="请输入用户帐号/昵称/手机号"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery()" icon="ele-Search" type="primary"
          >查询</el-button
        >
        <el-button @click="handleAdd()" icon="ele-Plus" type="success"
          >新增角色</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 列表部分 -->
    <el-table :data="tableList" border style="width: 100%">
      <el-table-column
        prop="nickName"
        label="用户昵称"
        align="center"
        fixed="left"
        width="120"
      />
      <el-table-column
        prop="username"
        label="用户账号"
        align="center"
        width="120"
      />
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column prop="email" label="邮箱" align="center" />
      <el-table-column
        prop="accountNonLocked"
        label="账号锁定"
        sortable
        align="center"
      >
        <template #default="{ row }">
          <el-tag
            :type="row.accountNonExpired ? 'success' : 'danger'"
            effect="dark"
            >{{ row.accountNonExpired ? "正常" : "过期" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="accountNonExpired"
        sortable
        label="账号过期"
        align="center"
      >
        <template #default="{ row }">
          <el-tag
            :type="row.accountNonLocked ? 'success' : 'danger'"
            effect="dark"
            >{{ row.accountNonLocked ? "正常" : "锁定" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="credentialsNonExpired"
        label="密码过期"
        sortable
        align="center"
      >
        <template #default="{ row }">
          <el-tag
            :type="row.credentialsNonExpired ? 'success' : 'danger'"
            effect="dark"
            >{{ row.credentialsNonExpired ? "正常" : "过期" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="105"
        align="center"
      />
      <el-table-column label="操作" width="260" fixed="right" align="center">
        <template #default="{ row }">
          <el-button icon="ele-Key" type="primary" link>密码重置</el-button>
          <el-button icon="ele-Edit" type="warning" link>修改</el-button>
          <el-popconfirm
            @confirm="handleDelete(row.id)"
            width="auto"
            :title="`确定永久删除【${row.nickName}】吗？`"
          >
            <template #reference>
              <el-button icon="ele-Delete" type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup name="SystemUser">
import { ref } from "vue";
import { getPageList, deleteById } from "@/api/System/user";
import { useTablePage } from "@/hooks/useTablePage";
const {
  tableListRef,
  editRef,
  loading,
  page,
  query,
  tableList,
  queryData,
  handleQuery,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage({ getPageList, deleteById });
</script>
<style lang="scss" scoped></style>
